﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/reset.source.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <style type="text/css">
        html, body { width: 100%; height: 100%; background-color: Gray; }
        
        #container { position: absolute; margin-left: -480px; top: 50px; left: 50%; border: solid 1px red; }
        
        #timeline_container { position: relative; border: #fff 4px solid; opacity: 0; }
        
        #viewport { position: relative; overflow: hidden; }
        #scrollbar { position: absolute; background: url(imgs/scrollbar_background.png) repeat-x 0 0; }
        #milestones { position: relative; border-top: #fff 4px solid; }
        
        .mark { background: url(imgs/scrollbar_mark.png) no-repeat 0 0; position: absolute; width: 13px; height: 21px; opacity: 100; }
        
        .dragger { position: absolute; cursor: pointer; background: url(imgs/scrollbar_dragger.png) no-repeat 0 0; }
        
        #pages img { cursor: url(imgs/drag_icon.png) pointer; }
    </style>
    <script type="text/javascript">

        jQuery(document).ready(function () {

            $("#pages").draggable({
                axis: "x",
                cursor: 'move',
                drag: function (event, ui) {
                    var minleft = $("#viewport").width() - $("#pages").width();
                    if (parseInt($(this).css("left")) > 0 || parseInt($(this).css("left")) < minleft) {
                        return false;
                    }
                },
                stop: function () {
                    var minleft = $("#viewport").width() - $("#pages").width();
                    if (parseInt($(this).css("left")) > 0) {
                        $(this).css("left", "0px");
                    } else if (parseInt($(this).css("left")) <= minleft) {
                        $(this).css("left", minleft+"px");
                    }
                },
                start: function () {

                }
            });

            //$(".dragger", "#scrollbar").draggable({ axis: "x", containment: "#scrollbar", scroll: false, cursor: 'move' });


            //scrollpane parts
            var scrollPane = $("#viewport"),
			    scrollContent = $("#pages");

            //build slider
            var scrollbar = $(".dragger").slider({
                slide: function (event, ui) {
                    if (scrollContent.width() > scrollPane.width()) {
                        scrollContent.css("margin-left", Math.round(
						ui.value / 100 * (scrollPane.width() - scrollContent.width())
					) + "px");
                    } else {
                        scrollContent.css("margin-left", 0);
                    }
                }
            });


        });

    </script>
</head>
<body>
    <div id="container">
        <div id="timeline_container" style="width: 952px; height: 450px; opacity: 1;">
            <div id="timeline">
                <div id="viewport" style="height: 265px;">
                    <div id="pages" style="width: 3000px; height: 100%; left: 0px; background-color: White;">
                        <img alt="" src="imgs/demobg.jpg" />
                    </div>
                </div>
                <div id="scrollbar" style="width: 952px; top: 244px;">
                    <div class="track" style="width: 952px; height: 21px;">
                        <div class="marks">
                            <div id="m0" class="mark" style="zoom: 1; display: block; left: 360px;">
                            </div>
                            <div id="m1" class="mark" style="zoom: 1; display: block; left: 520px;">
                            </div>
                            <div id="m2" class="mark" style="zoom: 1; display: block; left: 460px;">
                            </div>
                            <div id="m3" class="mark" style="zoom: 1; display: block; left: 260px;">
                            </div>
                        </div>
                        <div class="dragger" style="width: 59px; height: 21px; left: 0px;">
                        </div>
                    </div>
                </div>
                <div id="milestones" style="height: 174px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
